<template>
	<view>
		<view class="mainView">
			<view v-for="(item,index) in cells" :key="index" :class="'cell '+(now==index?'isNow':'')" :style="'color:'+(item.value<8?'#555555':'#DD523F')">{{item.value}}积分</view>
		</view>
		<button class="button" :disabled="sum!=0" @click="onClick">花费3积分抽奖</button>
		<view class="end">此功能仅供娱乐，我们反对任何形式的赌博活动</view>
		<view class="safeView"></view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				cells:[ //变化这里要去改变接口
					{value:1},
					{value:1},
					{value:8},
					{value:1},
					{value:1},
					{value:3},
					{value:3},
					{value:1},
					{value:8},
					{value:1},
					{value:8},
					{value:1},
				],
				now:-1,
				sum:0
			}
		},
		methods:{
			onClick(){
				const that=this;
				wx.request({
					url:that.myConfig.hostUrl+'/api/game.php',
					method:'POST',
					data:{
						openId:that.myConfig.openId
					},
					success:function(res){
						console.log(res);
						if(res.data.errCode==200){
							if(res.data.scroll==-1){
								uni.showToast({
									title:'你的积分还不够哦',
									icon:'none',
									duration:1200
								});
								return ;
							}
							that.sum=res.data.scroll;
							that.now=0;
							let intervalID=setInterval(function(){
								if(that.sum==0){
									clearInterval(intervalID);
									uni.showToast({
										title:'积分+'+that.cells[res.data.scroll%12].value,
										icon:'none',
										duration:1200
									});
								}
								else{
									that.now=(that.now+1)%12;
									that.sum--;
								}
							},200);
						}else{
							uni.showToast({
								title:'网络好像不太好',
								icon:'none',
								duration:1200
							});
						}
					},
					fail:function(){
						uni.showToast({
							title:'网络好像不太好',
							icon:'none',
							duration:1200
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.mainView{
		margin: 25rpx;
		text-align: center;
	}
	.cell{
		width: 150rpx;
		height: 150rpx;
		box-shadow: 0 0 5rpx 0 #666666;
		background:-webkit-linear-gradient(40deg, #ffffff, #B2D1FF, #ffffff);
		margin: 10rpx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-weight: 800;
		border-radius: 30rpx;
	}
	.isNow{
		background:-webkit-linear-gradient(40deg, #ffffff, #F0AD4E, #ffffff);
	}
	.button{
		width: 60%;
		background:-webkit-linear-gradient(40deg, #ffffff, #B2D1FF, #ffffff);
	}
</style>
